<template>
  <Table ref="tableRef" :columns="getColumns" :data="loadData" :alert="false" bordered>
    <template #operator>
      <div class="table-search">
        <div>
          <span class="table-search-box">
            <a-input v-model:value="searchValue" placeholder="请输入仓库实例名称搜索" style="width: 300px" allowClear>
              <template #prefix>
                <SvgIcon class="iconDef" :name="'search'" :color="'#d9d9d9'" width="16" height="16" />
              </template>
            </a-input>
          </span>
        </div>
        <div class="table-search-btn">
          <a-button class="actionBtn" type="primary" ghost @click="tableRef.refresh(true)">
            <SvgIcon class="iconDef" :name="'search'" :color="'#2590FF'" width="16" height="16" />
            查询
          </a-button>

          <a-button class="actionBtn" type="primary" ghost @click="refreshTable">
            <SvgIcon class="iconDef" :name="'refresh'" :color="'#2590FF'" width="16" height="16" />
            重置
          </a-button>
        </div>
      </div>
    </template>
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.dataIndex === 'index'"> {{ index + 1 }} </template>
      <template v-if="column.dataIndex === 'packageName'">
        <a class="ellipsis" :title="record.packageName" @click="handleClickToDetails(record)">{{
          record.packageName
        }}</a>
      </template>
      <template v-if="column.dataIndex === 'action'">
        <div
          class="table-operation"
          v-auth="{ objectId: artifactObj.uuid, objectType: ResourceType.repository, role: ArtifactRole.manager }"
        >
          <a @click="handelDelete(record)">删除</a>
        </div>
      </template>
    </template>
  </Table>

  <PackageDetailsModal
    ref="PackageDetailsModalRef"
    v-if="showModal"
    @hide-package-details-modal="hidePackageDetailsModal"
  />
</template>

<script lang="ts" setup>
import PackageDetailsModal from './pageModal/packageDetailsModal.vue';
import {
  queryArtifactRespositoryPackageListFun,
  deleteArtifactRespositoryPackageListFun,
} from '@/api/artifactRepository';
import { Modal, message } from 'ant-design-vue';
import { createVNode } from 'vue';
import { useArtifactRepositoryStore } from '@/store/modules/artifactRepository';
import { RepositoryEnum } from '@/enums/commonEnum';
import { ResourceType } from '@/enums/pipelineEnum';
import { ArtifactRole } from '@/enums/artifactRepositoryEnum';
const artifactRepositoryStore = useArtifactRepositoryStore();
const { artifactObj } = artifactRepositoryStore;

// NPM/MAVEN包管理列表
const columns = [
  { dataIndex: 'index', title: '序号', align: 'center', width: 60 },
  { dataIndex: 'packageName', title: '包名', align: 'center', ellipsis: true },
  { dataIndex: 'latestVersion', title: '最新推送版本', align: 'center', ellipsis: true },
  { dataIndex: 'componentCount', title: '版本数', align: 'center', ellipsis: true },
  { dataIndex: 'latestUpdateTime', title: '最近更新时间', align: 'center', ellipsis: true },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    fixed: 'right',
    width: 160,
  },
];

// DOCKER镜像管理列表
const dockerColumns = [
  { dataIndex: 'index', title: '序号', align: 'center', width: 60 },
  { dataIndex: 'packageName', title: '镜像名', align: 'center', ellipsis: true },
  { dataIndex: 'latestVersion', title: '最新推送版本', align: 'center', ellipsis: true },
  { dataIndex: 'latestUpdateTime', title: '最近更新时间', align: 'center', ellipsis: true },
  { dataIndex: 'componentCount', title: '版本数', align: 'center', ellipsis: true },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    fixed: 'right',
    width: 160,
  },
];
const showModal = ref<boolean>(false);
const PackageDetailsModalRef = ref<any>();
const tableRef = ref<any>('');
const searchValue = ref<string>('');
const loadData = async (parameter: any) => {
  const parameObj = {
    currentPage: parameter.current,
    pageSize: parameter.size,
    condition: {
      artifactUuid: artifactObj.uuid,
      condition: searchValue.value,
    },
  };
  const data = await getList(parameObj);
  return data;
};

const getColumns = computed(() => {
  if ([RepositoryEnum.NPM, RepositoryEnum.MAVEN].includes(artifactObj.artifactType)) {
    return columns;
  } else {
    return dockerColumns;
  }
});

//获取表格数据
const getList = async (parameObj: any) => {
  return await queryArtifactRespositoryPackageListFun(parameObj).then((res) => {
    const data = {
      total: res.totalCount,
      current: res.currentPage,
      pageSize: res.pageSize,
      records: res?.records || [],
    };
    return data;
  });
};

const handleClickToDetails = (record: any) => {
  showModal.value = true;
  nextTick(() => {
    PackageDetailsModalRef.value.onOpen(record);
  });
};

const hidePackageDetailsModal = () => {
  showModal.value = false;
};

const refreshTable = () => {
  searchValue.value = '';
  tableRef.value.refresh(true);
};

const handelDelete = async (record: any) => {
  Modal.confirm({
    title: '提示',
    icon: '',
    centered: true,
    content: createVNode('div', { style: 'color:black;' }, `确定要删除“制品文件：${record.packageName}”这一项数据吗？`),
    async onOk() {
      await deleteArtifactRespositoryPackageListFun(record.uuid).then(() => {
        message.success('删除成功');
        tableRef.value.refresh(true);
      });
    },
    onCancel() {},
  });
};
</script>
